import { Button } from '@arco-design/web-react'
import { IconCodeBlock, IconPaste } from '@arco-design/web-react/icon'
import Editor from './editor'

import { useAtom } from 'jotai'
import { atomModel } from '@/store'
import { useTemplate, FontendTypes, useCopyHooks } from '@/hooks'
import { useState, useEffect } from 'react'

// 前端代码组件
export default function FontendParse() {
  const [modelStuck] = useAtom(atomModel)
  const { parseToFontendCode } = useTemplate()

  const [indexString, setIndexString] = useState<string>('')
  const [dataString, setDataString] = useState<string>('')
  const [formString, setFormString] = useState<string>('')

  useEffect(() => {
    if (modelStuck) {
      setIndexString(parseToFontendCode(modelStuck, FontendTypes.INDEX))
      setDataString(parseToFontendCode(modelStuck, FontendTypes.DATA))
      setFormString(parseToFontendCode(modelStuck, FontendTypes.FORM))
      // rpcUpdate
    }
  }, [modelStuck])

  // 复制内容
  const copyToClipboard = async (str: string) => {
    const text = str.replaceAll('\n\n', '\n')
    return await useCopyHooks(text)
  }
  return (
    <div className="bg-white p-20px md:w-[calc(100vw-320px)] md:max-h-[calc(100vh-140px)] overflow-y-auto">
      <div className="align-center text-gray-6">
        <div className="mr-10px">
          <span className="" mr-5px>
            当前模型：{modelStuck.modelName}
          </span>
        </div>
        <div className="ml-10px">当前为文件片段内容:</div>
        <Button
          type="text"
          shape="circle"
          className="w-100px"
          icon={<IconPaste />}
          onClick={() => copyToClipboard(indexString)}
        ></Button>
      </div>
      <div className="h-240px overflow-y-auto w-80%">
        <Editor content={indexString} />
      </div>
      <div className="align-center text-gray-6">
        <div className="ml-10px">当前为data文件片段内容:</div>
        <Button
          type="text"
          shape="circle"
          className="w-100px"
          icon={<IconPaste />}
          onClick={() => copyToClipboard(dataString)}
        ></Button>
      </div>

      <div className="h-240px overflow-y-auto w-80%">
        <Editor content={dataString} />
      </div>
      <div className="align-center text-gray-6">
        <div className="ml-10px">当前为data文件片段内容:</div>
        <Button
          type="text"
          shape="circle"
          className="w-100px"
          icon={<IconPaste />}
          onClick={() => copyToClipboard(formString)}
        ></Button>
      </div>

      <div className="h-240px overflow-y-auto w-80%">
        <Editor content={formString} />
      </div>
    </div>
  )
}
